<template>
  <div>
    <el-form :inline="true" :model="search" class="demo-form-inline" label-width="80px">
      <el-button type="success" @click="medicionAdd()"><i class="el-icon-circle-plus-outline"></i>新增药品</el-button>
      <el-form-item label="药品名称">
        <el-input placeholder="请输入要查询的药品" v-model="search.nameLike"></el-input>
      </el-form-item>
      <el-form-item label="库存数量">
        <el-col :span="11">
          <el-input placeholder="输入起始数量" v-model="search.homemdnum" style="width: 100%;"></el-input>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-input placeholder="输入结束数量" v-model="search.endmdnum" style="width: 100%;"></el-input>
        </el-col>
      </el-form-item>
    <el-form-item label="药品类型" :label-width="formLabelWidth">
        <el-select v-model="search.mdtype" placeholder="请选择药品类型">
          <el-option label="西药" value="西药"></el-option>
          <el-option label="中药" value="中药"></el-option>
        </el-select>
      </el-form-item> 
      <el-form-item>
        <el-button type="primary" @click="list()"><i class="el-icon-search">查询</i></el-button>
        <el-button type="info" @click="reset()"><i class=" el-icon-refresh">重置</i></el-button>
      </el-form-item>
    </el-form>

    <el-table :data="medicionList" border  stripe style="width: 100%">
      <el-table-column prop="medid" label="药品编号" width="50px">
      </el-table-column>
      <el-table-column prop="mdname" label="药品名称" width="100px">
      </el-table-column>
      <el-table-column prop="effect" label="药品主治">
      </el-table-column>
      <el-table-column prop="price" label="药品售价">
      </el-table-column>
      <el-table-column prop="mdnum" label="药品数量">
      </el-table-column>
      <el-table-column prop="type" label="药品类型">
      </el-table-column>
      <el-table-column label="操作" width="280px">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleUpdate(scope.row)">调整价格</el-button>
          <el-button size="mini" type="info" @click="sumUpdate(scope.row)">更新库存</el-button>
          <el-button size="mini"  type="danger" plain @click="handlePur(scope.row)">申请采购</el-button>      
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页功能 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
    </el-pagination>

    <!--在添加药品对话框-->
    <el-dialog title="药品新增" :visible.sync="addDialogFormVisible">
      <el-form :model="medicion">
        <el-form-item label="药品名称" :label-width="formLabelWidth">
          <el-input v-model="medicion.mdname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品主治" :label-width="formLabelWidth">
          <el-input v-model="medicion.effect" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品售价" :label-width="formLabelWidth">
          <el-input v-model="medicion.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品类型" :label-width="formLabelWidth">
          <el-select v-model="medicion.type" placeholder="请选择药品类型">
            <el-option label="西药" value="西药"></el-option>
            <el-option label="中药" value="中药"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addmedicine()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 对话框结束 -->

    <!--修改价格弹窗 -->
    <el-dialog title="药品价格调整" :visible.sync="updateDialogFormVisible">
      <h3>药品名称：{{ medicion2.mdname }}</h3><br><br>
      <el-form :model="medicion2">
        <el-form-item label="药品售价" :label-width="formLabelWidth">
          <el-input v-model="medicion2.price" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatemedicine()">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改价格弹窗结束 -->

    <!--采购药品对话框-->
    <el-dialog title="药品采购" :visible.sync="buyDialogFormVisible">
      <el-form :model="medbuy">
        <el-form-item label="药名" :label-width="formLabelWidth">
          <el-input v-model="medbuy.mbname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="采购数量" :label-width="formLabelWidth">
          <el-input v-model="medbuy.mbnum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="采购价" :label-width="formLabelWidth">
          <el-input v-model="medbuy.mbcost" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品生产日期" :label-width="formLabelWidth">
          <el-date-picker v-model="medbuy.mbprotime" type="date" placeholder="选择生产日期日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="buyDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addmedbuy()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 对话框结束 -->

    
    <!--更新库存弹窗 -->
    <el-dialog title="更新库存数量" :visible.sync="DialogFormVisible">
      <h3>药品名称：{{ medicion3.mdname }}</h3><br><br>
      <el-form :model="medicion2">
        <el-form-item label="药品库存" :label-width="formLabelWidth">
          <el-input v-model="medicion3.mdnum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="DialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatenum()">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改价格弹窗结束 -->

  </div>
</template>

<script>

export default {
  data() {
    return {
      medicionList: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 5
      },
      addDialogFormVisible: false,
      updateDialogFormVisible: false,
      medicion: {},   //新增声明
      formLabelWidth: "120PX",
      medicion2: {},    //修改声明
      search: {},  //查询声明
      buyDialogFormVisible: false,  //采购药品
      DialogFormVisible:false,   //库存数量
      medicion3:{},        //更新库存数量
      medbuy:{},
    };
  },

  mounted() {
    this.list();
  },

  methods: {
    addmedbuy(){ //采购药品
      this.$axios.post("/medbuy/medbuyadd",this.medbuy) //请求体中带了一个对象
      .then((result) => {        //then方法来处理promise对象，result是请求成功后的响应对象
          let vo = result.data;  //响应对象的data属性赋给变量vo
          this.$message(vo.$message); //显示消息提示框显示操作结果的数据
          this.medbuy = {};     //将medbuy重置为空对象
          if (vo.code == 200) {  //返回code数据是否是200
            this.buyDialogFormVisible = false;   //200后操作对话框关闭
            this.list();     //重新刷新数据
          }
        }).catch((err) => {   //处理请求中错误的数据
          console.log(err);  // 打印错误信息
        });

    },

    
    handlePur() { //申请采购
      this.buyDialogFormVisible = true;
    },

    //更新库存
    updatenum(){
      this.$axios.put("/medicion/updatenum", this.medicion3)
        .then((result) => {
          this.$message(result.data.message);
          this.DialogFormVisible = false;
          this.list();
        }).catch((err) => {
          console.log(err);
        });
    },

    sumUpdate(med){
      this.DialogFormVisible = true; //更新库存数量对话框可显
      this.medicion3 = med;   //可显对话框中有原来的值
    },

    reset() {    //查询框信息重置
      this.search = {};
      this.list();
    },

    updatemedicine() {    //修改价格
      this.$axios.put("/medicion/update", this.medicion2)
        .then((result) => {
          this.$message(result.data.message);
          this.updateDialogFormVisible = false;
          this.list();
        }).catch((err) => {
          console.log(err);
        });
    },

    handleUpdate(med) {       //调整药品价格弹窗
      this.updateDialogFormVisible = true;    //调整药品价格弹窗可显
      this.medicion2 = med    //原本的价格在文本框里显示
    },

    addmedicine() {   //添加药品
      this.$axios.post("/medicion/save", this.medicion)
        .then((result) => {
          let vo = result.data;
          this.$message(vo.$message);
          this.medicion = {};
          if (vo.code == 200) {
            this.addDialogFormVisible = false;
            this.list();
          }
        }).catch((err) => {
          console.log(err);
        });
    },

    medicionAdd() {      //新增药品弹窗
      this.addDialogFormVisible = true;
    },

    //分页配置
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.list()
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.list()
    },

    list() {  //查询，查询分页，列表，列表分页都在一个请求里
      this.$axios.post("/medicion/medSearch?pageNum=" + this.pageInfo.pageNum + "&pageSize=" + this.pageInfo.pageSize,this.search)
        .then((result) => {
          let vo = result.data;
          if (vo.code == 200) {
            this.medicionList = vo.data.list; //最后list获取分页数据
            this.pageInfo = vo.data;
          }
        }).catch((err) => {
          console.log(err);
        });

    }
  }
};
</script>
